<template>
    <div class="bg-style">
        <i-pageBody class="add_color">
            <div slot="page-main">
                <div class="assist">
                    <div class="box">
                        <div class="hd">
                            <h3>环境检测</h3>
                        </div>
                        <div class="bd">
                            <div class="assist-info">
                                <div class="item">
                                    <div class="thumb">
                                        <img class="icon" src="../../../../assets/img/assist/icon1.png" alt="">
                                    </div>
                                    <div class="desc">
                                        <div class="num">{{monitor.scaEnvironmentGather.waterCollectingWellLevel}}</div>
                                        <div class="name">集水井水位(m)</div>
                                        <div class="name">
                                            电缆沟水位：{{["正常","异常"][monitor.scaEnvironmentGather.cableChuteWaterLevel]}}
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="thumb">
                                        <img class="icon" src="../../../../assets/img/assist/icon2.png" alt="">
                                    </div>
                                    <div class="desc">
                                        <div class="num">{{monitor.scaEnvironmentGather.temperature}}</div>
                                        <div class="name">温度(°C)</div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="thumb">
                                        <img class="icon" src="../../../../assets/img/assist/icon3.png" alt="">
                                    </div>
                                    <div class="desc">
                                        <div class="num">{{monitor.scaEnvironmentGather.humidity}}</div>
                                        <div class="name">湿度(%)</div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="thumb">
                                        <img class="icon" src="../../../../assets/img/assist/icon4.png" alt="">
                                    </div>
                                    <div class="desc">
                                        <div class="num">风向：{{monitor.scaEnvironmentGather.windDirection}}</div>
                                        <div class="name">风力{{monitor.scaEnvironmentGather.windStrength}}</div>
                                        <div class="name">雨量：{{monitor.scaEnvironmentGather.rainfall}}毫米</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row clearfix">
                        <div class="left">
                            <div class="box">
                                <div class="hd">
                                    <h3>照明监视</h3>
                                </div>
                                <div class="bd">
                                    <div class="illumination">
                                        <Table :height="584" border :columns="columns1" :data="data1"></Table>
                                        <div class="pagination">
                                            <span>共{{page.totalNum}}条记录 第{{page.currentPage}}/{{Math.ceil(page.totalNum/page.pageSize)}}页 </span>
                                            <Page show-sizer @on-change="goPage" @on-page-size-change="goPageSize"
                                                  :total="page.totalNum" :page-size="page.pageSize" show-elevator/>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <div class="box">
                                <div class="hd">
                                    <h3>SF6监视</h3>
                                </div>
                                <div class="bd">
                                    <ul v-for="(item,index) in monitor.scaSf6Data" :key="index" class="list">
                                        <li class="item">
                                            <div class="thumb">
                                                <img src="../../../../assets/img/assist/sf1.png" alt="" class="icon">
                                            </div>
                                            <div class="desc">
                                                <div class="name">{{item.energyUnitName}}</div>
                                                <div class="name">SF6浓度（%）</div>
                                                <div class="tip">{{item.sf6Value}}</div>
                                            </div>
                                        </li>
                                        <li class="item">
                                            <div class="thumb">
                                                <img src="../../../../assets/img/assist/sf2.png" alt="" class="icon">
                                            </div>
                                            <div class="desc">

                                                <div class="name">{{item.energyUnitName}}</div>
                                                <div class="name">氧气浓度（%）</div>
                                                <div class="tip">{{item.oxygenDensity}}</div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="box mg-top-60">
                                <div class="hd">
                                    <h3>安全范围监视</h3>
                                </div>
                                <div class="bd">
                                    <ul class="list">
                                        <li v-for="(item,index) in monitor.scaSecurityAlarm" :key="index" class="item">
                                            <div class="thumb">
                                                <img src="../../../../assets/img/assist/defense.png" alt=""
                                                     class="icon">
                                            </div>
                                            <div class="desc">
                                                <div class="name">{{item.energyUnitId}}</div>
                                                <div v-if="item.warningName == '告警'" class="tip primary">
                                                    {{item.warningName}}
                                                </div>
                                                <div v-if="item.warningName == '正常'" class="tip error">
                                                    {{item.warningName}}
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </i-pageBody>
    </div>
</template>

<script>
import {axiosGet} from "@/api/sysSetting.js";

export default {
	name: "assist",
	components: {},
	data() {
		return {
			page: {
				currentPage: 1,
				pageSize: 10,
				totalNum: 0

			},
			columns1: [
				{
					title: "序号", key: "lampDataId", render: (h, params, index) => {
						return h("span", this.page.pageSize * (this.page.currentPage - 1) + (params.index + 1));
					}
				},
				{title: "照明设备", key: "energyUnitId"},
				{
					title: "照明回路通断状态", key: "loopOnOffState", render: (h, params) => {
						return h("div", [
							h("span", ["通", "断"][params.row.loopOnOffState])
						]);
					}
				},
				{
					title: "照明控制运行状态", key: "controlRunState", render: (h, params) => {
						return h("div", [
							h("span", ["正常", "异常"][params.row.controlRunState])
						]);
					}
				},
				{title: "故障告警", key: "faultWarning"}
			],
			data1: [],
			monitor: {
				scaEnvironmentGather: [{}],
				scaSecurityAlarm: [],
				scaSf6Data: [{}]
			}
		};
	},
	computed: {},
	created() {
		this.initMonitor();
		this.initLamp();
	},
	mounted() {
		// this.$nextTick(() => this.getGeoJson(data))
		// axiosGet('/cps/areas_v2/bound/430382.json', {}).then((data) => {
		//   this.cpsDist = data.result;
		// })
	},
	methods: {
		goPageSize(page) {
			this.page.pageSize = page;
			this.initLamp();
		},
		goPage(page) {
			this.page.currentPage = page;
			this.initLamp();
		},
		initMonitor() {
			axiosGet("http://222.189.228.150:7016/scada/assist/monitor", {}).then((data) => {
				this.monitor = data.result;
			});
		},
		initLamp() {
			axiosGet("http://222.189.228.150:7016/scada/assist/lamp", {
				currentPage: this.page.currentPage,
				pageSize: this.page.pageSize
			}).then((data) => {
				this.data1 = data.custom.data;
				this.page.totalNum = data.totalNum;
			});

		}
	}
};
</script>

<style scoped lang="scss">
    /deep/ .ivu-table-tip table tr td {
        text-align: center;
        background-image: url("~@/assets/img/zwsj.png");
        background-position: center 60px;
        background-repeat: no-repeat;
        color: #999;
        height: 369px;
        background-size: 190px;
        span {
            display: none;
        }
    }
    .assist {
        height: 100%;
        overflow: scroll;
    }

    .mg-top-60 {
        margin-top: 60px;
    }

    .box {
        display: flex;
        flex-direction: column;
    }

    .box .hd {
        display: flex;
        align-items: center;
        padding-top: 10px;
    }

    .box .hd h3 {
        display: flex;
        align-items: center;
        height: 16px;
        border-left: 4px solid #00A4FF;
        padding-left: 10px;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        margin-bottom: 20px;
    }

    .box .bd {

    }

    .assist {
        display: flex;
        flex-direction: column;
        padding:20px;
    }

    .assist-info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .assist-info .item {
        width: 24%;
        height: 140px;
        border-radius: 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .assist-info .item:nth-of-type(1) {
        background: #FC7F7D;
    }

    .assist-info .item:nth-of-type(2) {
        background: #FFD973;
    }

    .assist-info .item:nth-of-type(3) {
        background: #46A3F7;
    }

    .assist-info .item:nth-of-type(4) {
        background: #90D66D;
    }

    .assist-info .item .thumb {
        width: 132px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .assist-info .item .desc {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .assist-info .item .num {
        font-size: 38px;
        font-weight: 400;
        color: #FFFFFF;
    }

    .assist-info .item .name {
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
    }

    .row {
        margin-top: 40px;
    }

    .row .left {
        width: 67%;
        float: left;
    }

    .row .right {
        width: 30%;
        display: flex;
        float: right;
        flex-direction: column;
    }

    .illumination {
        display: flex;
        flex-direction: column;
    }

    .illumination .pagination {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 30px;
    }

    .illumination .pagination span {
        font-size: 14px;
        font-weight: 400;
        color: #515a6e;
    }

    .list {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .list .item {
        display: flex;
        flex-direction: row;
        width: 50%;
        align-items: center;
        margin-bottom: 30px;
    }

    .list .item .thumb {
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .list .item .desc {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .list .item .name {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        margin-bottom: 10px;
    }

    .list .item .tip {
        font-size: 24px;
        font-weight: 400;
        color: #333333;
    }

    .list .item .tip.primary {
        color: #90D66D;
    }

    .list .item .tip.error {
        color: #FC7F7D;
    }
</style>
